<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8' />
  <title>加载ArcGIS瓦片</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css' rel='stylesheet' />
  <style>
  body {
    margin: 0;
    padding: 0;
  }
  #map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
  }
  </style>
</head>

<body>
  <div id='map'></div>
  <script>
  mapboxgl.accessToken = 'pk.eyJ1IjoieWFuY29uZ3dlbiIsImEiOiJjaml4eWgxMnowNHY0M3BvMW96cDI1bWJ6In0.QA-bmCCquo-mziBfZ8KOIQ';

  var map = new mapboxgl.Map({
    container: 'map', // container id
    style: {
      "version": 8,
      "sources": {
        "raster-tiles": {
          "type": "raster",
          "tiles": ["https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"],
          "tileSize": 256
        }
      },
      "layers": [{
        "id": "simple-tiles",
        "type": "raster",
        "source": "raster-tiles",
        "minzoom": 0,
        "maxzoom": 22
      }]
    },
    center: [116, 30], // starting position
    zoom: 2 // starting zoom
  });
  </script>
</body>

</html>